<template>
  <div id="header_id">
    <img class="logo" src="../../assets/image/logo.png" alt="" @click="handleJump('')">
    <ul>
      <li :class="currentIndex===1?'active':''" @click="handleJump('partakeGame')">参与游戏</li>
      <li :class="currentIndex===2?'active':''" @click="handleJump('invitingLink')">邀请好友</li>
    </ul>
    <ol v-if="!userInfo">
      <li @click="handleJump('login')">登录</li>
      <li @click="handleJump('register')">注册</li>
    </ol>
    <ol v-if="userInfo">
      <li class="li_active">{{userInfo.userName}}
        <div class="user-info">
          <span @click="handleJump('assets')">我的资产</span>
          <span @click="handleJump('detail')">流水明细</span>
          <span @click="handleJump('profits')">我的分红</span>
        </div>
      </li>
      <li @click="handleExit">退出</li>
    </ol>
  </div>
</template>

<script>
  export default {
    name: 'header_id',
    data() {
      return {
        currentIndex: null
      }
    },
    created() {
      let currentRoute = this.$route.path
      if (this.$route.meta.current) {
        this.currentIndex = this.$route.meta.current
      }
    },
    computed: {
      userInfo() {
        return this.$store.state.user.userInfo
      }
    },
    methods: {
      handleJump(index) {
        this.$router.push({
          path: '/' + index
        })
      },
      handleExit() {
        this.$store.commit('handleClearUserinfo')
      }
    }
  }
</script>
<style lang="less">
  #header_id {
    width: 1200px;
    margin: 0 auto;
    height: 110px;
    /*overflow: hidden;*/
    .logo {
      width: 289px;
      height: 61px;
      padding-top: 25px;
      float: left;
      cursor: pointer;
    }
    ul {
      padding-left: 156px;
      float: left;
      overflow: hidden;
      li {
        width: 138px;
        float: left;
        line-height: 110px;
        cursor: pointer;
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #000000;
        text-align: center;
      }
      .active {
        background: #8638FD;
        color: #FFFFFF;
      }
    }
    ol {
      float: right;
      /*overflow: hidden;*/
      margin-top: 40px;
      li {
        float: left;
        padding: 0 40px;
        line-height: 30px;
        height: 30px;
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #5117FD;
        cursor: pointer;
        &:nth-child(2) {
          border-left: 2px solid #979797;
        }
      }
      .li_active {
        position: relative;
        color: #000;
        padding-bottom: 10px;
        &:hover {
          .user-info {
            display: block;
          }
        }
        .user-info {
          position: absolute;
          top: 36px;
          z-index: 99;
          width: auto;
          height: 140px;
          overflow: hidden;
          background: #FFFFFF;
          box-shadow: 0 2px 21px 0 rgba(215, 199, 238, 0.50);
          border-radius: 6px;
          padding: 10px 20px;
          box-sizing: border-box;
          display: none;
          > span {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: block;
            overflow: hidden;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #A9A9A9;
            &:hover {
              border-bottom: 1px solid #8638FD;
              color: #8638FD;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
</style>
